import { useState } from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import { motion } from "framer-motion";

const subjects = ["语文", "数学", "英语", "物理", "化学", "生物", "政治", "历史", "地理"];

const gradeData = [
  { exam: "期中考试", date: "2023-11-15", subject: "语文", average: 78, highest: 95 },
  { exam: "期中考试", date: "2023-11-15", subject: "数学", average: 82, highest: 98 },
  { exam: "期中考试", date: "2023-11-15", subject: "英语", average: 85, highest: 97 },
  { exam: "期末考试", date: "2024-01-20", subject: "语文", average: 81, highest: 96 },
  { exam: "期末考试", date: "2024-01-20", subject: "数学", average: 85, highest: 99 },
  { exam: "期末考试", date: "2024-01-20", subject: "英语", average: 88, highest: 98 },
];

const classPerformance = [
  { name: "高一(1)班", 平均分: 78, 最高分: 95 },
  { name: "高一(2)班", 平均分: 82, 最高分: 98 },
  { name: "高二(1)班", 平均分: 85, 最高分: 97 },
];

export default function GradeManagement() {
  const [selectedSubject, setSelectedSubject] = useState(subjects[0]);

  const filteredData = gradeData.filter(item => item.subject === selectedSubject);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-[#2C3E50]">成绩管理</h2>
        <div className="flex space-x-4">
          <button className="bg-[#2C3E50] hover:bg-[#1a2635] text-white px-4 py-2 rounded-lg">
            <i className="fas fa-file-import mr-2"></i>导入成绩
          </button>
          <button className="bg-[#E74C3C] hover:bg-[#c0392b] text-white px-4 py-2 rounded-lg">
            <i className="fas fa-history mr-2"></i>历史记录
          </button>
        </div>
      </div>

      {/* 学科选择 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold mb-4 text-[#2C3E50]">选择学科</h3>
        <div className="flex flex-wrap gap-3">
          {subjects.map((subject) => (
            <motion.button
              key={subject}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setSelectedSubject(subject)}
              className={`px-4 py-2 rounded-lg ${
                selectedSubject === subject
                  ? "bg-[#E74C3C] text-white"
                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
              }`}
            >
              {subject}
            </motion.button>
          ))}
        </div>
      </div>

      {/* 成绩趋势图表 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold mb-4 text-[#2C3E50]">
          {selectedSubject}成绩趋势
        </h3>
        <div className="h-64">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={filteredData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="exam" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="average"
                stroke="#2C3E50"
                activeDot={{ r: 8 }}
                name="平均分"
              />
              <Line
                type="monotone"
                dataKey="highest"
                stroke="#E74C3C"
                name="最高分"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* 班级表现对比 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold mb-4 text-[#2C3E50]">
          班级表现对比
        </h3>
        <div className="h-64">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={classPerformance}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="平均分"
                stroke="#2C3E50"
                activeDot={{ r: 8 }}
              />
              <Line
                type="monotone"
                dataKey="最高分"
                stroke="#E74C3C"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* 文件拖拽上传区域 */}
      <div className="mt-4">
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center">
          <i className="fas fa-file-excel text-4xl text-green-600 mb-4"></i>
          <p className="text-gray-600 mb-2">拖拽Excel文件到此处上传</p>
          <p className="text-sm text-gray-500">支持按学科单独导入成绩</p>
          <button className="mt-4 bg-[#2C3E50] hover:bg-[#1a2635] text-white px-4 py-2 rounded-lg">
            选择文件
          </button>
        </div>
      </div>
    </div>
  );
}
